<template>
  <div class="registerSelection">
    <el-row>
      <!--左侧图片 -->
      <el-col :span="10">
        <div class="login_img"></div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="14">
        <div class="login_img bg_img login_right">
          <div class="logo" :style="{'background-image': 'url('+ require('@/assets/img/login/' + $config.logoBgUrl) +')','margin-left': $config.logoBg_left}"></div>

          <div class="organization1">
            <div class="organization_title">
              <div class="organization_title_wordage">
                {{ $route.query.type == 'have' ? $t('add.add199') : $t('jigou.jigou7') }}
              </div>
              <!-- 登录方式 -->
              <div class="organization_title_way"></div>
            </div>

            <div class="organization_item">
              <el-form
                ref="joinForm"
                label-position="left"
                label-width="200px"
                :model="joinForm"
                size="small"
              >
                <el-form-item :label="$t('jigou.jigou8') + '：'" prop="">
                  <el-select
                    v-model="addForm.organizedType"
                    style="width: 260px"
                    filterable
                    :placeholder="$t('jigou.jigou9')"
                  >
                    <el-option
                      v-for="(item, index) in createType"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('jigou.jigou10') + '：'" prop="">
                  <el-select
                    v-if="$route.query.type == 'have'"
                    v-model="addForm.name"
                    :disabled="addForm.organizedType === ''"
                    :placeholder="$t('jigou.jigou19')"
                    :remote-method="onNameChange"
                    clearable
                    filterable
                    :multiple="false"
                    remote
                    :reserve-keyword="false"
                    @blur.native.capture="onSelectBlur"
                  >
                    <el-option
                      v-for="item in nameOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-input
                    v-else
                    v-model="addForm.name"
                    style="width: 260px"
                    :placeholder="$t('jigou.jigou18')"
                  />
                </el-form-item>
              </el-form>
              <div class="organization_item_btn">
                <el-button
                  style="width: 100px; margin-right: 10px"
                  round
                  plain
                  :size="optionButtonSize"
                  @click="cancleHandle"
                  >{{ $t('jigou.jigou11') }}</el-button
                >
                <el-button
                  style="width: 100px; margin-right: 10px"
                  round
                  type="primary"
                  :size="optionButtonSize"
                  @click="submitHandle"
                  >{{
                    $route.query.type == 'have' ? $t('jigou.jigou12') : $t('jigou.jigou16')
                  }}</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'BLZMasterSelection',

  data() {
    return {
      joinForm: {
        account: '',
      },
      addForm: {
        organizedType: '',
        name: '',
      },
      createType: [
        {
          // 机构
          value: 1,
          label: this.$t('add.add208'),
        },
        {
          value: 2,
          label: this.$t('add.add209'),
        },
      ],
      nameOptions: [],
    };
  },

  mounted() {},

  methods: {
    onSelectBlur() {
      setTimeout(() => {
        if (
          this.addForm.name === '' ||
          this.addForm.name === null ||
          this.addForm.name === undefined
        ) {
          this.nameOptions = [];
        }
      }, 500);
    },
    onNameChange(v) {
      if (v === '' || v === null || v === undefined || v.trim() === '') {
        this.nameOptions = [];
        return;
      }
      this.$http
        .get('/sys/organized/joiningInstitutions', {
          params: {
            joiningType: this.addForm.organizedType,
            joiningName: v,
          },
        })
        .then(({ data: res }) => {
          this.nameOptions = res.data;
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 取消
    cancleHandle() {
      window.history.go(-1);
    },
    submitHandle() {
      let url, msg;
      const form = {
        ...this.addForm,
      };
      if (this.$route.query.type == 'have') {
        url = '/sys/organized/joinOrganized';
        msg = this.$t('jigou.jigou17');
        const nameIndex = this.nameOptions.findIndex((item) => item.id === this.addForm.name);
        if (nameIndex !== -1) {
          form.name = this.nameOptions[nameIndex].name;
        }
      } else {
        // 创建
        url = '/sys/organized/createOrganized';
        msg = this.$t('jigou.jigou15');
      }
      if (form.organizedType === '' || form.name === '') {
        return;
      }
      this.$http
        .post(url, form)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            // this.$router.push('/home')
            // 创建
            if (url == '/sys/organized/createOrganized') {
              localStorage.setItem('user_owner', res.data.owner);
              localStorage.setItem('user_permissionsList', res.data.permissionsList);
              this.$router.push('/caseorder');
            } else {
              localStorage.setItem('tg_expand', true);
              this.$router.push('/personinfo');
            }

            this.$message.success(msg);
            this.addForm = {
              organizedType: '',
              name: '', // 0诊所 1技工所
            };
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss">
.login {
  height: 100vh;
  padding: 0;
  margin: 0;
}

//
.login_img {
  width: 100%;
  height: 100vh;
  background-image: url(~@/assets/img/login/bg_left.png);
  background-size: cover;
}

.bg_img {
  background-image: url(~@/assets/img/login/bg_right.png);
  background-size: cover;
}

// 右侧
.login_right {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .logo {
    position: absolute;
    top: 0%;
    left: 0;
    width: 288px;
    height: 120px;
    // background-image: url(~@/assets/img/login/logo.png);
    background-size: cover;
  }
}

.organization1 {
  width: 384px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #333333;

  .organization_item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #333333;
    }

    // span{
    //   font-size: 14px;
    //   font-weight: 500;
    //   line-height: 20px;
    //   color: #333333;
    //   margin-bottom: 26px;
    //   margin-top: 26px;
    // }
    .el-select{
      width: 100%;
    }
  }

  .organization_item_btn {
    margin-top: 60px;
  }

  // organization_item_btn">
  //                   <el-button
}

.organization_title {
  width: 100%;
  margin-bottom: 0px;

  .organization_title_wordage {
    height: 49px;
    text-align: center;
    font-size: 35px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 49px;
    color: #333333;
    opacity: 1;
  }

  .organization_title_way {
    margin: 48px 0;
    padding: 0 23%;
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between;
  }
}
</style>
